<template>
  <view class="goods-sku">
    <PropSelect :multiple="false" :data="checkList" title="选择推荐的商品规格" tip="如辣度、甜度等，属性与价格、库存无关" @new="handleNewSpec" @change="handleSpecChange" />
    <Form ref="specForm" v-show="isAddSpec||skuList.length>0" :init-data="initSkuList" :price="goodsInfo.price" />
    <SaveButton @click.native="handleClickSave" />
  </view>
</template>

<script>
import PropSelect from "../../components/public/PropSelect/index.vue";
import SaveButton from "../../components/public/PropSelect/SaveButton.vue";
import Form from "./components/Form.vue";
import { mapMutations, mapState } from "vuex";
import schema from "async-validator";

export default {
  components: { PropSelect, Form, SaveButton },
  data() {
    return {
      checkList: [
        { name: "杯型", specs: ["小杯", "大杯"] },
        { name: "分量", specs: ["小份", "大份"] },
        { name: "尺码", specs: ["小", "大"] }
      ],
      formData: {
        skulist: []
      },
      formList: [],
      isAddSpec: false,
      deleteSkus: []
    };
  },
  computed: {
    ...mapState({
      skuList: state => state.goods.goodsInfo.skuList,
      goodsInfo: state => state.goods.goodsInfo
    }),
    initSkuList() {
      return this.skuList.filter(v => !v.isDelete);
    }
  },
  methods: {
    ...mapMutations({
      SET_GOODS_SKU_LIST: "SET_GOODS_SKU_LIST"
    }),
    handleSpecChange(item) {
      this.isAddSpec = item.name ? true : false;
      this.setFormData(item);
    },
    handleClickSave() {
      let data = this.$refs.specForm.getData();
      if (!data) return false;
      let { formData, deleteSkus } = data;
      let skuList = formData.values.map(item => {
        let sku = {
          price: item.price,
          spec: [{ key: formData.key, value: item.spec }],
          stock: item.stock
        };
        if (item.id) sku.id = item.id;
        return sku;
      });
      if (skuList.length > 0) {
        skuList = [...skuList, ...deleteSkus];
      } else {
        skuList = [
          { price: this.goodsInfo.price, spec: null, stock: null },
          ...deleteSkus
        ];
        if (!this.skuList[0].spec) skuList[0].id = this.skuList[0].id;
      }
      uni.$emit(this.$consts.EMIT_TYPE.SET_SKU_LIST, { skuList, formData });
      this.$back();
    },
    handleNewSpec() {
      this.isAddSpec = true;
      this.setFormData();
    },
    setFormData(item) {
      let formData = {
        // key: "杯型",
        key: "",
        values: [
          // {
          //   spec: "大",
          //   price: 50,
          //   stock: null
          // },
        ]
      };
      // 是否为选择的推荐规格
      if (item) {
        formData.key = item.name;
        formData.values = item.specs.map(v => {
          return {
            spec: v,
            price: this.goodsInfo.price || null,
            stock: null
          };
        });
      } else {
        formData.values = [
          {
            spec: "",
            price: this.goodsInfo.price || null,
            stock: null
          }
        ];
      }
      this.$refs.specForm.setData(formData);
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}
.goods-sku {
  padding: 0 $form-item-left;
  padding-top: 60rpx;
  padding-bottom: 150rpx;
  .delete-btn-wrap {
    display: flex;
    justify-content: center;
  }
}
</style>
